<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ToolTip效果</title>
    <style>
        body {
            font-size: 18px;
            line-height: 1.8;
            font-family: "Microsoft YaHei", "微软雅黑";
        }

        #demo {
            width: 500px;
            margin: 30px auto;
            padding: 20px 30px;
            position: relative;
            background-color: #fff;

            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;

            -webkit-box-shadow: 0 0 5px 5px #ccc;
            -moz-box-shadow: 0 0 5px 5px #ccc;
            box-shadow: 0 0 5px 5px #ccc;
        }

        #demo h2 {
            color: #03F;
        }
        #demo .tooltip {
            color: #03F;
            cursor: help;
        }

    </style>
</head>

<body>
<div id="demo">
    <p><a class="tooltip" id="tooltip1">慕课网</a>的使命是传播互联网最前沿技术，帮助更多的人实现梦想！在慕课网前端开发、
        <a class="tooltip" id="tooltip2">Android</a>开发、<a class="tooltip" id="tooltip3">iOS</a>开发等课程统统有，你还在等什么，赶紧来学习吧。
    </p>
</div>
<script type="text/javascript">
    (function () {
        var $ = function (id) {
            return typeof id === 'string' ? document.getElementById(id) : id;
        };
        var isIE = function () {
            var navUA = navigator.userAgent.toLocaleLowerCase();
            return (navUA.indexOf('msie') != -1) ? parseInt(navUA.split('msie')[1]) : false;
        };

        function addEvent(elem, method, callback) {
            if (typeof elem.addEventListener != 'undefined') {
                addEvent = function (elem, method, callback) {
                    elem.addEventListener(method, callback, false);
                };
            } else if (typeof elem.attachEvent != 'undefined') {
                addEvent = function (elem, method, callback) {
                    elem.attachEvent('on' + method, function () {
                        callback.call(elem, window.event);
                    });
                };
            }
            addEvent(elem, method, callback);
        }

        var toolTips = $('demo');

        function tooltip(obj, id, html, width, height) {
            if (!$(id)) {
                var toolTipBox = document.createElement('div');
                toolTipBox.className = 'toolTipBoxClass';
                toolTipBox.id = id;
                toolTipBox.innerHTML = html;
                obj.appendChild(toolTipBox);

                toolTipBox.style.width = width ? width + 'px' : 'auto';
                toolTipBox.style.height = height ? height + 'px' : 'auto';

                if (!width && isIE()) {
                    toolTipBox.style.width = toolTipBox.offsetWidth;
                }

                toolTipBox.style.position = 'absolute';
                toolTipBox.style.display = 'block';

                var left = obj.offsetLeft;
                var top = obj.offsetTop + obj.offsetHeight;

                var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

                if (left + toolTipBox.offsetLeft > clientWidth) {
                    var toolLeft = toolTips.offsetLeft;
                    left = clientWidth - toolTipBox.offsetWidth - toolLeft;
                    if (left < 0) left = 0;
                }

                toolTipBox.style.left = left + 'px';
                toolTipBox.style.top = top + 'px';

                addEvent(obj,'mouseleave',function(){
                   setTimeout(function(){
                       $(id).style.display = 'none';
                   },300) ;
                });

            } else {
                $(id).style.display = 'block';
            }
        }


        addEvent(toolTips,'mouseover',function(e){
            var event = e || window.event,
                    target = event.target || event.srcElement;
            if(target.className === 'tooltip'){
                var _html,_id,_width = 200;
                switch (target.id){
                    case "tooltip1":
                        _id = "t1";
                        _html = '<iframe src="http://baike.baidu.com/view/10962527.htm" width="480" height="300"></iframe>';
                        break;
                    case "tooltip2":
                        _id = "t2";
                        _html = '<iframe src="http://baike.baidu.com/subview/1241829/9322617.htm" width="480" height="300"></iframe>';
                        break;
                    case "tooltip3":
                        _id = "t3";
                        _html = '<iframe src="http://baike.baidu.com/subview/158983/8747673.htm" width="480" height="300"></iframe>';
                        _width = 500;
                        break;
                    default :
                        return false;
                }

                tooltip(target,_id,_html,_width);
            }
        });

    })();


</script>
</body>
</html>